<template>
	<view class="page" :style="{ '--color': color }">
		<status-bar title="团队成员"></status-bar>
		<view class="Info" v-if="myInfo">
			<view class="userBox">
				<image :src="$imgUrls(myInfo.headimg)" mode="aspectFill" class="userImg"></image>
				<view class="Lvs">{{ myInfo.upLevelInfo.thisLevelTitle }}</view>
			</view>
			<view class="flex-1 white">
				<view class="size30">{{ myInfo.name }}</view>
				<view class="size30 m-top10">{{ myInfo.tel }}</view>
			</view>
		</view>

		<view class="LvBox" v-if="myInfo">
			<text class="size30 color_33">团队等级</text>
			<view class="LvWrapper">
				<text class="size28">{{ myInfo.upLevelInfo.thisLevelTitle }}</text>
				<view class="content">
					<text class="Txt">{{ myInfo.upLevelInfo.text }}</text>
					<view class="line">
						<u-line-progress :percentage="myInfo.upLevelInfo.proportion" height="9" activeColor="#ffcc00"></u-line-progress>
					</view>
				</view>
				<text class="size32 color_33">{{ myInfo.upLevelInfo.nextLevelTitle }}</text>
			</view>
		</view>

		<view class="Team">
			<view class="titleBox">
				<scroll-view scroll-x="true" class="flex-1 nowrap" :scroll-into-view="scrollintoview">
					<view class="list" :id="`list${index}`" :class="{ active: item.id == id }" v-for="(item, index) in columns" :key="index" @click="confirm(item, index)">
						{{ item.title }}({{ item.num }})
					</view>
				</scroll-view>
				<view class="screen">
					<view class="iconfont icon-qiandao black size36" @click="showScreen = true"></view>
				</view>
			</view>

			<!-- 类型排序 -->
			<view class="Typeordering">
				<view class="lists" @click="timeType(1)">
					<text class="Txt">注册时间</text>
					<view class="ordring">
						<view class="iconfont icon-paixu-shang" :class="{ active: sortType == 2 }"></view>
						<view class="iconfont icon-paixu-xia" :class="{ active: sortType == 1 }"></view>
					</view>
				</view>
				<view class="lists" @click="timeType(2)">
					<text class="Txt">复购单量</text>
					<view class="ordring">
						<view class="iconfont icon-paixu-shang" :class="{ active: sortType == 5 }"></view>
						<view class="iconfont icon-paixu-xia" :class="{ active: sortType == 3 }"></view>
					</view>
				</view>
				<view class="lists" @click="timeType(3)">
					<text class="Txt">团队业绩</text>
					<view class="ordring">
						<view class="iconfont icon-paixu-shang" :class="{ active: sortType == 6 }"></view>
						<view class="iconfont icon-paixu-xia" :class="{ active: sortType == 4 }"></view>
					</view>
				</view>
			</view>

			<view class="list" v-for="(item, index) in pageData" :key="index" @click="toFans(item)">
				<view class="Infos">
					<view class="userBox">
						<image :src="$imgUrls(item.headimg)" mode="aspectFill" class="userImg"></image>
						<view class="Lvs">{{ item.team_name }}</view>
					</view>
					<view class="flex-1 d-flex f-column">
						<text class="ellipsis black size26">{{ item.name }}</text>
						<text class="color_33 h6 m-top6">{{ item.tel }}</text>
						<text class="color_33 h6 m-top6">{{ item.add_date }}</text>
					</view>
				</view>
				<view>
					<view class="perfTxt">自购:{{ item.my_order_num }}</view>
					<view class="perfTxt">业绩:{{ item.my_order_money }}</view>
					<view class="perfTxt">团队:{{ item.teamInfo.teamUserNum }}人</view>
					<view class="perfTxt">复购:{{ item.repurchase_order_num }}</view>
				</view>
			</view>

			<view class="p-top100 p-bot100" v-if="!pageData.length">
				<u-empty mode="list" text="暂无相关内容"></u-empty>
			</view>
		</view>
		<!-- 
		<u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker> -->

		<u-popup :show="showScreen" @close="showScreen = false" :round="10">
			<view class="ScreentBox">
				<!-- <view class="list">
					<text class="title">类型排序：</text>
					<view class="lisBox">
						<view class="lis" @click.stop="sortType = item.sortType" :class="{ active: item.sortType == sortType }" v-for="(item, index) in sortTypeData" :key="index">
							{{ item.name }}
						</view>
					</view>
				</view> -->
				<view class="list">
					<text class="title">时间范围：</text>
					<view class="listTime">
						<view class="TimetXT" @click.stop="open">{{ startTime ? startTime : '开始时间' }}</view>
						<view class="Line">——</view>
						<view class="TimetXT" @click.stop="open">{{ endTime ? endTime : '结束时间' }}</view>
					</view>
				</view>

				<view class="row j-se m-top30">
					<view class="ConfigBtn figBtns" @click="ScrolBtn">确定</view>
					<view class="resetBtn figBtns" @click="resetBtn">重置</view>
				</view>
			</view>
		</u-popup>

		<uni-calendar :insert="false" range :start-date="'2025-1-1'" :end-date="maxDate" @confirm="confirmCale" ref="calendar" />
	</view>
</template>

<script>
import { mapState } from 'vuex';
import Api from '@/common/Api.js';
export default {
	data() {
		return {
			myInfo: '',
			pageData: [],
			cycle: [],
			page: 1,
			limit: 10,
			getMore: true,
			id: 'mySelf',
			name: '全部',
			count: 0,
			show: false,
			columns: [],
			scrollintoview: '',
			showScreen: false,
			showCalendar: false,
			sortTypeData: [
				{
					name: '时间顺序',
					sortType: 1
				},
				{
					name: '时间倒序',
					sortType: 2
				},
				{
					name: '复购',
					sortType: 3
				},
				{
					name: '业绩',
					sortType: 4
				}
			],
			sortType: 2,
			startTime: '',
			endTime: '',
			mode: 'range',
			maxDate: ''
		};
	},
	computed: {
		...mapState(['color'])
	},
	onLoad() {
		this.getConfig();
		this.getTeamUserList();
		this.setDateRange();
	},
	// onReady() {
	// 	this.$refs.calendar.setFormatter(this.formatter);
	// },
	methods: {
		open() {
			this.$refs.calendar.open();
			this.showScreen = false;
		},
		async getConfig() {
			const result = await Api.getConfig();
			this.myInfo = result;
		},

		getTeamUserList() {
			this.$showLoading('');
			this.$http
				.post({
					url: '/privateTeamApi/getTeamUserList',
					data: {
						page: this.page,
						limit: this.limit,
						id: this.id,
						sortType: this.sortType,
						startTime: this.startTime,
						endTime: this.endTime
					}
				})
				.then((res) => {
					this.$hideLoading();
					if (res.errcode != 100) return this.$Toast(res.msg);
					const reuslt = res.data || [];
					const levelNum = res.levelNum || [];
					if (this.columns) this.columns = levelNum;

					this.pageData = this.page == 1 ? reuslt : this.pageData.concat(reuslt);
					if (reuslt.length < this.limit) this.getMore = false;
					this.cycle = res.cycle || [];
				});
		},

		timeType(num) {
			if (num == 1) this.sortType == 1 ? (this.sortType = 2) : (this.sortType = 1);
			if (num == 2) this.sortType == 5 ? (this.sortType = 3) : (this.sortType = 5);
			if (num == 3) this.sortType == 6 ? (this.sortType = 4) : (this.sortType = 6);

			this.ScrolBtn();
		},
		getLevelList() {
			this.$http
				.post({
					url: '/privateTeamApi/getLevelList'
				})
				.then((res) => {
					if (res.errcode != 100) return this.$Toast(res.msg);
					const result = res.data || [];
					let count = 0;

					this.columns = result;
					if (result.length) this.id = result[0].id;

					this.getTeamUserList();
				});
		},
		confirm(item, index) {
			this.id = item.id;
			this.page = 1;
			this.getMore = true;
			if (index >= 1) {
				this.scrollintoview = `list${index - 1}`;
			} else {
				this.scrollintoview = `list${index}`;
			}

			this.getTeamUserList();
		},
		toFans(item) {
			this.toUrl(`/moneyPage/distributors/myFans?vid2=${item.v_id}`);
		},
		setDateRange() {
			const d = new Date();
			const year = d.getFullYear();
			let month = d.getMonth() + 1;
			const date = d.getDate();
			let minyear = year - 1;
			this.maxDate = `${year}-${month}-${date}`;
		},
		confirmCale(e) {
			console.log(e);
			e.range.after ? (this.endTime = e.range.after) : (this.endTime = '');
			e.range.before ? (this.startTime = e.range.before) : (this.startTime = '');
			if (e.range.before && !e.range.after) this.endTime = e.range.before;
			this.showScreen = true;
		},
		ScrolBtn() {
			this.page = 1;
			this.getMore = true;
			this.$pop.pageScrollTo();
			this.showScreen = false;
			this.getTeamUserList();
		},
		resetBtn() {
			this.startTime = '';
			this.endTime = '';
			this.ScrolBtn();
		}
	},
	onReachBottom() {
		if (!this.getMore) return;
		this.page++;
		this.getTeamUserList();
	}
};
</script>

<style lang="scss" scoped>
:deep .uni-calendar-item--after-checked {
	background-color: var(--color);
}
:deep .uni-calendar-item--before-checked {
	background-color: var(--color);
}
.ScreentBox {
	width: 100%;
	padding: 50rpx 30rpx;
	display: flex;
	flex-direction: column;
	.list {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 50rpx;
		.title {
			color: #000;
			font-size: 32rpx;
		}
		.lisBox {
			width: 100%;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.lis {
				height: 70rpx;
				padding: 0 24rpx;
				border: 1px solid #999;
				border-radius: 10rpx;
				color: #999;
				font-size: 28rpx;
				margin-right: 20rpx;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
			}
			.active {
				color: #fff;
				background-color: var(--color);
				border-radius: 1px solid var(--color) !important;
				border-radius: 10rpx !important;
			}
		}
		.listTime {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24rpx;
			.Line {
				height: 70rpx;
				height: 1px;
				color: #999;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				margin: 0 20rpx;
			}
			.TimetXT {
				width: 240rpx;
				height: 70rpx;
				color: #999;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #999;
				border-radius: 10rpx;
			}
		}
	}
	.figBtns {
		width: 240rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		color: #fff;
		background-color: var(--color);
		font-size: 30rpx;
	}
	.ConfigBtn {
		color: #fff;
		background-color: var(--color);
	}
	.resetBtn {
		color: #999;
		background-color: #f1f1f1;
	}
}
.page {
	background-color: #f2f2f2;
	padding-bottom: 24rpx;
}

.Info {
	background-color: var(--color);
	padding: 40rpx 24rpx;
	display: flex;
	align-items: center;
}

.userBox {
	width: 150rpx;
	height: 120rpx;
	display: flex;
	justify-content: center;
	position: relative;

	.userImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.Lvs {
		max-width: 100%;
		background-color: #ff9900;
		color: #fff;
		font-size: 22rpx;
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
	}
}

.LvBox {
	width: 690rpx;
	padding: 20rpx;
	background-color: #fff;
	margin: 24rpx auto 0;
	border-radius: 10rpx;

	.LvWrapper {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.content {
			flex: 1;
			margin: 0 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.Txt {
				color: #b7655a;
				font-size: 26rpx;
			}

			.line {
				width: 100%;
				margin-top: 10rpx;
			}
		}
	}
}

.Team {
	width: 690rpx;
	margin: 30rpx auto 0;
	background-color: #fff;
	border-radius: 10rpx;
	.Typeordering {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.lists {
			display: flex;
			align-items: center;
			padding: 10rpx;
			.Txt {
				color: #333;
				font-size: 28rpx;
			}
			.ordring {
				display: flex;
				flex-direction: column;

				padding-left: 10rpx;
				.iconfont {
					font-size: 20rpx;
					padding: 0;
					color: #ccc;
					transform: scale(0.7);
					transform-origin: top left;
				}
				.icon-paixu-shang {
					margin-top: 10rpx;
				}
				.icon-paixu-xia {
					margin-top: -4rpx;
				}
				.active {
					color: #000;
				}
			}
		}
	}
	.titleBox {
		width: 100%;
		padding: 20rpx 0 0 0;
		display: flex;
		align-items: center;
		.list {
			padding: 8rpx 22rpx;
			border: 1px solid #f2f2f2;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #999;
			margin-left: 16rpx;

			display: inline-block;
		}
		.list:last-child {
			margin-right: 0;
		}

		.active {
			background-color: var(--color);

			color: #fff;
		}
		.select {
			display: flex;
			align-items: center;
		}
		.screen {
			color: #000;
			font-size: 26rpx;
			padding: 20rpx 30rpx;
		}
	}

	.list {
		padding: 20rpx;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		align-items: center;

		.Infos {
			flex: 1;
			display: flex;
		}

		.perfTxt {
			color: #333;
			font-size: 24rpx;
			margin-top: 6rpx;
		}
	}
}

.swiper {
	height: 160rpx;
}
</style>
